<template>
	<view class="container">
		<view class="header_search_box">
			<view class="header_search">
				<view class="header_search_left">
					<image src="/static/search.png" mode=""></image>
					<input v-model="searchData" placeholder-class="my-input-placeholder" class="search-input"
						type="text" placeholder="搜索" />
				</view>
				<view class="header_search_right" @click="searchCar">搜索</view>
			</view>
		</view>
		<view class="recommend" v-if="recommendList.length > 0">
			<view class="recommend-title">推荐搜索</view>
			<view class="recommend-list">
				<view class="recommend-item" v-for="(item,index) in recommendList" :key="index" @click="search(item)">{{item.name}}</view>
			</view>
		</view>
		<view class="search-history" v-if="historyList.length > 0">
			<view class="history-list">
				<view class="history-item" >
					<text>搜索历史</text>
					<view class="item-right" @click="emptyHistory">
						<uni-icons type="trash" size="18"></uni-icons>
						<text>清空</text>
					</view>
				</view>
				<view class="history-item" v-for="(item,index) in historyList" :key="index" @click="search(item)">
					<text class="name">{{item.name}}</text>
					<view class="item-right">
						<!-- <uni-icons type="closeempty" size="18"></uni-icons> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {searchRecommend,searchRecordsList} from '@/api/home.js'
	import {xsSearchRecordsSave,xsSearchRecordsEmpty} from '@/api/brand.js'
	export default {
		data() {
			return {
				searchData: '',
				recommendList: [],
				historyList: [],
				users_id: uni.getStorageSync("login").id,
			}
		},
		mounted(){
			
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				searchRecommend().then( res => {
					this.recommendList = res.data
				})
				searchRecordsList(this.users_id,1).then( res => {
					this.historyList = res.data
				})
			},
			searchCar(){
				if(this.searchData){
					xsSearchRecordsSave({
						state: 1,
						users_id: this.users_id,
						name: this.searchData
					})
					uni.navigateTo({
					  url: `/main/home/index/homeSearchList?search=${this.searchData}`,
					});
				}else{
					uni.showToast({
						title: "请输入搜索内容",
						icon: "none",
					})
				}
				
			},
			search(item){
				uni.navigateTo({
				  url: `/main/home/index/homeSearchList?search=${item.name}`,
				});
			},
			// 清空历史
			emptyHistory(){
				xsSearchRecordsEmpty({
					state: 1,
					users_id: this.users_id
				}).then(res => {
					this.init()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		// background-color: #fff;
		height: 100%;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333;
		.header_search_box{
			background-color: #fff;
			padding: 28rpx;
		}
		.header_search{
			height: 60rpx;
			background: #F6F8FA;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			.header_search_left{
				flex: 1;
				display: flex;
				align-items: center;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-left: 27rpx;
				}
				input{
					flex: 1;
					padding: 0 15rpx;
					font-size: 30rpx;
				}
			}
			.header_search_right{
				margin-right: 6rpx;
				width: 112rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #0E59EA;
				border-radius: 26rpx;
				text-align: center;
				color: #fff;
				font-size: 30rpx;
			}
		}
		.recommend{
			background-color: #fff;
			padding: 28rpx;
			padding-right: 11rpx;
			.recommend-title{
				
			}
			.recommend-list{
				margin-top: 10rpx;
				overflow: hidden;
				.recommend-item{
					float: left;
					width: calc(33.3% - 17rpx);
					margin-right: 17rpx;
					margin-top: 20rpx;
					color: #000;
					height: 60rpx;
					line-height: 60rpx;
					background: #F7F8FA;
					border-radius: 30rpx;
					color: #000;
					text-align: center;
				}
			}
		}
		.search-history{
			background-color: #fff;
			margin-top: 20rpx;
			.history-list{
				.history-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #E6E6E6;
					padding: 28rpx;
					font-size: 28rpx;
					.name{
						flex: 1;
					}
					.item-right{
						color: #999;
						display: flex;
						align-items: center;
						.uni-icons{
							margin-right: 7rpx;
						}
					}
				}
			}
		}
	}
</style>
